import React, {PureComponent} from 'react';
import {connect} from 'dva';

import styles from './UserLayout.less';
import logo from '@/assets/yay.jpg';
import * as localeUitls from '@/utils/localeUtils';
import {COPYRIGHT, FULL_NAME, WEBSITE} from "@/globalConfig";
import {GlobalProvider} from "jh-lib";
import * as requestObj from "@/utils/request";
import {formatLocaleDocTitle} from "@/utils/localeUtils";
import {getUserInfo} from "@/utils/storage";

const myFormatMessage = localeUitls.myFormatMessage;

const footerComp = (
  <div className={'global-footer'} >{`2020 ${COPYRIGHT}`}</div>
);

const mapStateToProps = ({loading, global: {locale}}) => ({
  locale,
  loading,
});

@connect(mapStateToProps)
export default class UserLayout extends PureComponent {

  constructor(props) {
    super(props);
    window.dvaDispatch = this.props.dispatch;
    getUserInfo(); // 调用这个方法，是为了处理“如果有用户信息，则跳转到首页”
  }

  componentDidMount() {
    // 标识是不是在 “iframe"里面
    // let isIframe = 'LOGIN' === getStorage(STORAGE_KEY.IFRAME_LOGIN);
    let isIframe = window.isIframe;
    if (isIframe) {
      document.getElementsByTagName('html')[0].style.minWidth = 'auto';
    }
    const {location} = this.props;
    formatLocaleDocTitle(location.pathname, [this.props.route]);
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    const {location} = this.props;
    // 如果是在 iframe 中，每次更新都将当前的 pathname 传给父应用的 loginIframeUriChange。
    // （目前仅用于改变登录弹框的尺寸）
    if (window.isIframe && window.parent.loginIframeUriChange && location.pathname) {
      window.parent.loginIframeUriChange(location.pathname);
    }
    // 如果是 切换语言
    if (prevProps.locale !== this.props.locale) {
      // 根据路由，将【页面标题】国际化
      formatLocaleDocTitle(location.pathname, [this.props.route]);
    }
  }

  render() {
    const {
      children
    } = this.props;

    // 标识是不是在 “iframe"里面
    // let isIframe = 'LOGIN' === getStorage(STORAGE_KEY.IFRAME_LOGIN);
    let isIframe = window.isIframe;

    const childBox = (
      <GlobalProvider localeUtils={localeUitls} request={requestObj}>
        <div className={styles.childrenContainer} style={isIframe ? {margin: 0, width: '100%'} : {}}>
          {children}
        </div>
      </GlobalProvider>
    );

    if (isIframe) { // 如果是在 iframe 里，则只显示登录框
      return childBox;
    }

    return (
      <div className={styles.container}>
        <div className={styles.banner} style={{position: 'relative'}}>
          <div className={styles.container_inner}>
            <a href={WEBSITE} className={styles.logo}>
              <img src={logo} alt={'LOGO'}/>
              <div className={styles.logo_content}>{FULL_NAME}</div>
            </a>
            {/*<SelectLang {...this.props} className={styles.backIndex}/>*/}
            {/*<a className={styles.backIndex} href={'https://www.jianhui.com'}>{formatMsgByCn('返回首页')}</a>*/}
            <div className={styles.banner_content}>
              <div className={styles.banner_content_title}>{myFormatMessage('login.field.title')}</div>
              <div className={styles.banner_content_content}>{myFormatMessage('login.field.content')}</div>
            </div>
          </div>
        </div>
        <div className={styles.container_inner} style={{maxWidth: '100%'}}>

          <div className={styles.content}>

            {
              childBox
            }
          </div>

        </div>
        {footerComp}
      </div>
    );
  }
}
